<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!--  -->
      <div class="h-100 w-5 d-flex justify-content-between">
        <!-- 东区总开1 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">东区总开1</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="height-33 pt-3" v-for="(item,index) in oneCarData1" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width"
                       :class="index==0?'item_bg_warning': index==1?'item_bg_success':'item_bg_danger'"></div>
                  <div class="h-100 item_width2 d-flex align-items-center pl-2">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 东区总开2 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">东区总开2</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="height-33 pt-3" v-for="(item,index) in oneCarData2" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width"
                       :class="index==0?'item_bg_warning': index==1?'item_bg_success':'item_bg_danger'"></div>
                  <div class="h-100 item_width2 d-flex align-items-center pl-2">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 西区总开 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">西区总开</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="height-33 pt-3" v-for="(item,index) in oneCarData3" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width"
                       :class="index==0?'item_bg_warning': index==1?'item_bg_success':'item_bg_danger'"></div>
                  <div class="h-100 item_width2 d-flex align-items-center pl-2">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍照明负载 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍照明负载</div>
            </div>
          </div>
          <div class="d-flex justify-content-between item_content">
            <div class="width-33 pt-3">
              <div class="h-50 mr-2 pb-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_warning"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">2101-2106室</div>
                    <div class="d-flex align-items-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber(twoCardData0.deviceValue)}}</div>
                      <div class="font-blue font-16 mt-3">kW</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-50 mr-2 pt-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_danger"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">2107-2112室</div>
                    <div class="d-flex align-items-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber(twoCardData1.deviceValue)}}</div>
                      <div class="font-blue font-16 mt-3">kW</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="width-33 pt-3">
              <div class="h-50 ml-1 mr-1 pb-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_color1"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">2114室</div>
                    <div class="d-flex align-items-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber(twoCardData2.deviceValue)}}</div>
                      <div class="font-blue font-16 mt-3">kW</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-50 ml-1 mr-1 pt-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_color2"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">2115室</div>
                    <div class="d-flex align-items-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber(twoCardData3.deviceValue)}}</div>
                      <div class="font-blue font-16 mt-3">kW</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="width-33 h-100 pl-2 pt-3">
              <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                <div class="h-100 item_width item_bg_success"></div>
                <div class="h-100 item_width2 d-flex flex-column justify-content-between pl-2 pt-3 pb-2 pr-2">
                  <div class="font-white font-12">宿管间</div>
                  <div class="d-flex align-items-center justify-content-center">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(twoCardData4.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                  <div>
                    <el-image class="image_size" :src="line_two" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 公共区域负载 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">公共区域负载</div>
            </div>
          </div>
          <div class="d-flex flex-wrap align-items-center justify-content-between item_content">
            <div class="width-30 h-50 pt-3" v-for="(item,index) in threeCardData" :key="index">
              <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                <div class="h-100 item_width" :class="threeCardBg[index]"></div>
                <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                  <div class="font-white font-12">{{threeCardTitle[index]}}</div>
                  <div class="d-flex align-items-center">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-2">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 2号楼1层房间大功率负载对比 -->
      <div class="h-100 w-9 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">2号楼1层房间大功率负载对比</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="bar-first"></div>
          </div>
        </div>
      </div>
      <!-- 2号楼1层负载分布 -->
      <div class="h-100 w-3">
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">2号楼1层负载分布</div>
              </div>
            </div>
            <div class="item_content pt-3">
              <div class="h-100 w-100" id="pie-first"></div>
            </div>
          </div>
        </div>
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">2号楼1层负载排名</div>
              </div>
            </div>
            <div class="item_content">
              <div class="h-100 w-100 d-flex flex-column justify-content-between pt-3 pb-3">
                <div class="d-flex align-items-center" v-for="(item,index) in sixCardData" :key="index">
                  <div class="width-33 d-flex align-items-center font-white">
                    <div class="border_three p-1 mr-2">#{{index + 1}}</div>
                    <div>{{item.xValue}}</div>
                  </div>
                  <div class="width-77">
                    <el-progress color="#07C160" :percentage="setItemProgress(item)"
                                 :format="format(item)"></el-progress>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListLoadByNum,
    queryTwoListLoadByNum,
    queryThreeListLoadByNum,
    queryFourListLoadByReport,
    queryFiveListLoadByReport,
    querySixListLoadByReport
  } from "@/api/dormTwoBuildingOneFloor/loadAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_one: require('@/assets/img/line_one.png'),
        line_two: require('@/assets/img/line_two.png'),

        timeout: [],

        oneCarData1: [],
        oneCarData2: [],
        oneCarData3: [],

        twoCardData0: {},
        twoCardData1: {},
        twoCardData2: {},
        twoCardData3: {},
        twoCardData4: {},

        threeCardData: [],
        threeCardTitle: ['东区过道照明1', '东区过道照明2', '西区过道照明', '应急照明', '饮水机', '洗衣机'],
        threeCardBg: ['item_bg_success', 'item_bg_success', 'item_bg_color2', 'item_bg_danger', 'item_bg_warning', 'item_bg_color1'],

        fourCarData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
        },
        fiveCardData: [],
        sixCardData: [],
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListLoadByNum()
      this.queryTwoListLoadByNum()
      this.queryThreeListLoadByNum()
      this.queryFourListLoadByReport()
      this.queryFiveListLoadByReport()
      this.querySixListLoadByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListLoadByNum()
        _this.queryTwoListLoadByNum()
        _this.queryThreeListLoadByNum()
        _this.queryFourListLoadByReport()
        _this.queryFiveListLoadByReport()
        _this.querySixListLoadByReport()
      }, 30000);

      //
      // this.timeout[1] = setInterval(() => {

      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      setItemProgress(data) {
        if (this.$formatNumber(data.yValue)==0) {
          return 0
        } else {
          return this.$formatNumber(data.percent)
        }
      },

      format(percentage) {
        return () => {
          return this.$formatNumber(percentage.yValue) + ' kW'
        }
      },

      queryOneListLoadByNum() {
        queryOneListLoadByNum().then(res => {
          let tempData = res.object
          this.oneCarData1 = tempData[0].deviceList
          this.oneCarData2 = tempData[1].deviceList
          this.oneCarData3 = tempData[2].deviceList
        })
      },
      queryTwoListLoadByNum() {
        queryTwoListLoadByNum().then(res => {
          let tempData = res.object
          this.twoCardData0 = tempData[0]
          this.twoCardData1 = tempData[1]
          this.twoCardData2 = tempData[2]
          this.twoCardData3 = tempData[3]
          this.twoCardData4 = tempData[4]
        })
      },
      queryThreeListLoadByNum() {
        queryThreeListLoadByNum().then(res => {
          let tempData = res.object
          this.threeCardData = tempData

          let yjd = tempData[3].deviceValue
          let ysj = tempData[4].deviceValue

          let yjd2 = this.$subtractAndAssign(yjd, ysj)
          this.$set(this.threeCardData[3], 'deviceValue', yjd2);
        })
      },
      queryFourListLoadByReport() {
        queryFourListLoadByReport().then(res => {
          let tempData = res.object || []
          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue == '宿管间' ? tempData[i].xValue : tempData[i].xValue + '室')

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber(arr[0]))
            seriesData2.push(this.$formatNumber(arr[1]))
          }

          this.fourCarData.xData = xData
          this.fourCarData.seriesData1 = seriesData1
          this.fourCarData.seriesData2 = seriesData2
          charts.barEchart('bar-first', this.fourCarData)
        })
      },
      queryFiveListLoadByReport() {
        queryFiveListLoadByReport().then(res => {
          let tempData = res.object || []
          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }

          this.fiveCardData = tempData2

          charts.pieEchart('pie-first', this.fiveCardData)
        })
      },

      querySixListLoadByReport() {
        querySixListLoadByReport().then(res => {
          let tempData = res.object || []

          this.sixCardData = tempData
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-33 {
    height: 33.33%;
  }

  .width-30 {
    width: 32%;
  }

  .width-33 {
    width: 33.33%;
  }

  .width-77 {
    width: 76.67%;
  }

  .item_width {
    width: 8px;
  }

  .item_width2 {
    width: calc(100% - 8px);
  }

  .item_bg_success {
    background-color: #1AA652;
  }

  .item_bg_warning {
    background-color: #FFB822;
  }

  .item_bg_danger {
    background-color: #FF6A93;
  }

  .item_bg_color1 {
    background-color: #87f7c7;
  }

  .item_bg_color2 {
    background-color: #1292b1;
  }

  .item_bg_border {
    background-color: #0A343D;
    border-radius: 4px;
    overflow: hidden;
  }

  ::v-deep .el-progress__text {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff !important;
  }

  .clearLastMb:nth-last-child(1), .clearLastMb:nth-last-child(2) {
    margin-bottom: 0 !important;
  }


  .clearLastMb2:nth-last-child(1), .clearLastMb2:nth-last-child(2), .clearLastMb2:nth-last-child(3), .clearLastMb2:nth-last-child(4), .clearLastMb2:nth-last-child(5) {
    margin-bottom: 0 !important;
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .border_two {
    border-radius: 6px;
  }

  .border_three {
    background: rgba(12, 93, 88, 0.87);
    border: 1px solid #07c160;
  }

  .image_size {
    width: calc(100% - 0px);
    height: 48px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  ::v-deep .el-progress-bar {
    width: 90%;
  }
</style>
